<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 金职母婴云平台 </title>
    <style>

        html,body{
            height: 100%;
            margin: 0;
        }

        #wordIframe{

        }

        #wordIframe::-webkit-scrollbar {
            width: 0;
            display: none;
        }

        #video{
            display: none;
            width: 100%;
            height: 100%;
        }

        .img{
            width: 100%;
            display: none;
        }

        #img{
            width: 100%;
            object-fit: fill;
        }

    </style>
</head>
<body>

<input type="hidden" th:value="${path}" id="path">
<input type="hidden" th:value="${suffix}" id="suffix">

<video controls="controls" autoplay="autoplay" width="" id="video"></video>

<div class="img"></div>

</body>
</html>

<script src="/js/jquery.min.js"></script>
<script>

    let fileName = $('#path').val();
    let suffix = $("#suffix").val();

    if( suffix == 'mp4' ){
        $("#video").html('<source src="'+ fileName +'" type="video/mp4" />').show();
    }

    if( suffix == 'mov' || suffix == 'flv'){
        $('body').html('该视频格式暂不支持播放').css({'text-align':'center','line-height':'10'});
    }

    if( suffix == 'jpg' || suffix == 'png' ){
        $(".img").html('<img id="img" src="'+ fileName +'" alt="">').show();
    }

    if( suffix == 'url' || suffix == 'com'){
        document.location.href = fileName;
    }

    let arr = 'pdf,ppt,pptx,xls,xlsx,doc,docx';
    if( arr.indexOf(suffix) != -1 ){
        openWord();
    }

    function openWord() {
        //fileName为文件上传到服务器后的文件路径
        // let xurl = 'http://view.xdocin.com/xdoc?src=' + fileName; //这个地址是固定的写法（当然，这个 url 是需要付费 ）
        //在昨天，在百度之后，发现了wps 也有这么的一个功能，能线预览pdf,word,excel 等文件
        //let xurl = 'https://wps-view.zhihuipk.com/?src=' + fileName; //用法跟上面的一样，在这儿我就不多说了
        let xurl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + encodeURIComponent(fileName); //用法跟上面的一样，在这儿我就不多说了
        // let url = xurl + encodeURIComponent(fileName);//如果文件名有中文，需要转译一下
        var opacityBottom = `<div class="opacityBottom" style = ""><iframe class="bigImg" id="wordIframe" src="${xurl}"  width="100%" height="${document.body.clientHeight - 70}"></iframe></div>`;
        $(document.body).append(opacityBottom);
    }

</script>